<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>Welcome to awesomeness</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.js"
	type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript"
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8">
	$counter = 0;
	function updateChallenge(x) {
		$.getJSON('/newimage', function(data) {
			x.find("#challge_image_0").attr("src", data.firstImage);
			x.find("#challge_image_1").attr("src", data.secondImage);
			x.find("#challge_image_2").attr("src", data.thirdImage);
			x.find("#challenge-id").val(data.id);
		});
	}

	function showLoading() {
		$("#loading-white").dialog({
			closeOnEscape : false,
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
			},
			modal : true,
			draggable : false,
			resizable : false
		});
	}

	function changeChallengeType(x) {
		if (x.prop('selectedIndex') == 0) {
			x = x.parent().parent();
			x.find("#challenge_rows_img").show();
			x.find("#challenge_rows_questions").hide();
		} else {
			x = x.parent().parent();

			x.find("#challenge_rows_img").hide();
			x.find("#challenge_rows_questions").show();
		}
	}

	function addRow() {
		$counter++;
		$("#counter").val($counter);
		var cloned = $('#challenge_rows0').clone();
		cloned.attr("id", "challenge-rows" + $counter);
		renameInput(cloned.find("#challenge-name"), "-name");
		renameInput(cloned.find("#challenge-type"), "-type");
		renameInput(cloned.find("#challenge-own-type"), "-own-type");

		renameInput(cloned.find("#challenge-id"), "-id");

		renameInput(cloned.find("#challenge-question"), "-question");
		renameInput(cloned.find("#challenge-right-answer"), "-right-answer");
		renameInput(cloned.find("#challenge-wrong-answer1"), "-wrong-answer1");
		renameInput(cloned.find("#challenge-wrong-answer2"), "-wrong-answer2");
		cloned.find('h3').text("Challenge" + $counter);
		cloned.appendTo('#challenges_rows');
		cloned.show();
		updateChallenge(cloned);
	}

	function renameInput(cloned, ext) {
		cloned.attr("name", "challenge-" + $counter + ext);
	}

	function deleteRow(x) {
		if ($counter > 1) {
			x.remove();
			$counter--;
		}
	}

	$(document).ready(function() {
		var format = 'dd-mm-yy';
		$("#datefrom").datepicker({
			dateFormat : format
		});
		$("#dateto").datepicker({
			dateFormat : format
		});
		$("#dateformat").val(format);
		addRow();
		$("#create_event").validate({
			rules : {
				field : {
					required : true,
					dateDE : true
				}
			},
			messages : {
				name : "Venligst skriv navn",
				dateto : "Venligst skriv dato",
				datefrom : "Venligst skriv dato"
			},
			submitHandler : function(form) {
				form.submit();
				showLoading();
			}
		});
	});
</script>
</head>
<body>
	<div id="loading-white">
		<img src="images/loading.gif" /> Please wait...
	</div>
	<div>
		<div id="top-wrapper">
			<h1>Awesome competetion surveys</h1>
		</div>
		<div id="content-wrapper">
			<div id="content-holder">
				<h2>Event</h2>
				<form accept-charset="UTF-8" action="/createevent"
					class="simple_create_event" id="create_event" method="post">
					<input type="hidden" name="counter" value="1" id="counter" /> <input
						type="hidden" name="dateformat" id="dateformat" value="" />
					<div>
						<label class="string_needed_show">Navn: </label> <input
							type="text" name="name" class="required" minlength="2" value="" />
						<label class="">Email:</label> <input type="text" name="email"
							class="email" />
					</div>
					<div>
						<div>
							<label for="datefrom" class="string_needed_show">Fra dato</label>
							<input id="datefrom" class="required date" type="text"
								name="datefrom" /> <label for="dateto"
								class="string_needed_show">Til dato</label> <input id="dateto"
								class="required" type="text" name="dateto" />
						</div>
					</div>
					<div id="challenges_rows">
						<h2>Challenges</h2>
						<div id="challenge_rows0">
							<h3>Challenge 0</h3>
							<div>
								<input type="hidden" name="challenge-id" value=""
									id="challenge-id" /> <a href="#" onClick="addRow();">+++</a> <a
									href="#" onClick="deleteRow($(this).parent().parent());">---</a>
								<label class="string_needed_show" for="challenge-name">Navn</label>
								<input class="required" type="text" minlength="2"
									name="challenge-name" value="" id="challenge-name" />
								<!--<select id="challenge-type" name="challenge-type" onchange="changeChallengeType($(this));">
									<option>Billeder</option>
									<option>SpÃ¸rgsmÃ¥l</option>
									</select>
									<input type="checkbox" id="challenge-own-type" name="challenge-own-type" value="Brug eget" onchange="challengeUseOwn($(this));"/>
									Brug egne <a href="#" onClick="updateChallenge($(this).parent().parent());">Opdater</a>-->
							</div>
							<!--
								<table id="challenge_rows_img">
								<tr>
								<td><img id="challge_image_0" width="100" alt="" src=""/></td>
								<td><img id="challge_image_1" width="100" alt="" src=""/></td>
								<td><img id="challge_image_2" width="100" alt="" src=""/></td>
								</tr>
								<tr id="challenge_rows_img_file">
								<td colspan="3">
								<input onChange="inputFileChanged($(this));" type="file" name="challenge-image" id="challenge-image"/>
								</td>
								</tr>
								</table>-->
							<table class="challenge_rows_question"
								id="challenge_rows_questions">
								<tr>
									<td><label class="string_needed_show" for="">Spørgsmål</label></td>
									<td><input type="text" class="required"
										name="challenge-question" value="" id="challenge-question" />
									</td>
									<td><label>Rigtigt svar</label></td>
									<td><input type="text" class="required"
										name="challenge-right-answer" value=""
										id="challenge-right-answer" /></td>
								</tr>
								<tr>
									<td><label class="string_needed_show" for="">Svarmuligheder</label></td>
									<td><input type="text" name="challenge-wrong-answer1"
										value="" id="challenge-wrong-answer1" /></td>
									<td><label>Forkert svar</label></td>
									<td><input type="text" name="challenge-wrong-answer2"
										value="" id="challenge-wrong-answer2" /></td>
								</tr>
							</table>
						</div>
						<div></div>
					</div>
					<div>
						<input type="submit" name="button" id="button" />
					</div>
				</form>
			</div>
		</div>
		<div id="footer-wrapper"></div>
	</div>
</body>
</html>